<template>
    <div style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;">
        <div style="padding:7px;background: #fff;border-radius: 4px;" @click.stop>
            <div class="radio_wrapper">
                <div class="radio_content">
                    <RadioGroup v-model="check">
                        <Radio :name="item" v-for="item in full" :key=item style="margin:10px 0">
                            {{item}}
                            <template #icon="props">
                                <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon"/>
                            </template>
                        </Radio>
                    </RadioGroup>
                </div>
                <div class="radio_btn_wrapper">
                    <div class="radio_btn_cancel" @click="cancel">取消</div>
                    <div class="radio_btn_confirm" @click="confirm">确认</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import check_icon from './img/check.svg'
    import uncheck_icon from './img/uncheck.svg'
    import {RadioGroup, Radio} from 'vant'

    export default {
        name: "RadioList",
        components: {
            RadioGroup,
            Radio
        },
        props: {
            fullList: Array,
            checked: {
                type: [String, Number, Object],
                default: ''
            }
        },
        data() {
            return {
                full: [],
                check: '',
                activeIcon: check_icon,
                inactiveIcon: uncheck_icon,
            }
        },
        methods: {
            confirm() {
                if (!this.check) {
                    return
                }
                let idx = ''
                let index = this.full.indexOf(this.check)
                if (index != -1) {
                    idx = index
                }
                this.$emit('confirm', this.check, idx)
            },
            cancel() {
                this.$emit('cancel')
            },
        },
        mounted() {
            this.full = this.fullList
            this.check = this.checked
        },
        watch: {
            fullList() {
                this.full = this.fullList
            },
            checked() {
                this.check = this.checked
            },
        }
    }
</script>

<style scoped>
    .radio_wrapper {
        background-color: #fff;
        padding: 10px;
        min-width: 250px;
        max-height: 384px;
    }

    .radio_content {
        max-height: 360px;
        overflow: auto;
    }

    .radio_btn_wrapper {
        display: flex;
        flex-direction: row;
        margin-top: 20px;
        color: #fff;
        font-size: 16px;
        justify-content: space-around;
    }

    .radio_btn_cancel {
        width: 121px;
        height: 36px;
        background-color: #ACB318;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    .radio_btn_confirm {
        width: 121px;
        height: 36px;
        background-color: #454592;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
</style>